<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,
        user-scalable=no">

    <title>乐淘</title>
    <link rel="stylesheet" href="assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="assets/mui/css/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/user.css">
    <script src="assets/zepto/zepto.min.js"></script>
    <script src="assets/mui/js/mui.min.js"></script>
    <script src="assets/artTemplate/template-native.js"></script>
    <script src="js/common.js"></script>
    <!-- jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap核心 js 与 css 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- bootstrap 图片上传相关文件 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/piexif.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/sortable.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/purify.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/fileinput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/themes/fa/theme.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/locales/(lang).js"></script> -->

    <style>
        #main-form {
            margin-top: 60px;
        }
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav header">
        <a href="user.html" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">设置狗头</h1>
        <a class="mui-icon mui-icon-camera mui-pull-right"></a>
    </header>

    <div class="mui-conten">
        <div id="main-form" class="col-md-4 col-md-offset-4">
            <form id="form" action="#" class="form-horizontal">

                <div class="form-group">
                    <label class="col-md-2 control-label small"><span class="text-danger">❤</span>专属狗头</label>
                    <div class="col-md-10 has-success">
                        <input id="pic" name="pic" type="file" class="form-control" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label small"><span class="text-danger">❤</span>口头禅</label>
                    <div class="col-md-10 has-success">
                        <input name="name" type="text" class="form-control" placeholder="最多8个字符" />
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-md-2 control-label small"><span class="text-danger">❤</span>用户昵称</label>
                    <div class="col-md-10 has-success">
                        <input name="officialWeb" type="text" class="form-control" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label small"><span class="text-danger">❤</span>简介留言</label>
                    <div class="col-md-10 has-success">
                        <textarea name="introduction" type="password" class="form-control" placeholder="最多256个字符"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-10 col-md-offset-2">
                        <button id="submitData" type="submit" class="btn btn-primary">保存</button>
                        <button type="reset" class="btn btn-danger">重置</button>
                    </div>
                </div>

            </form>
        </div>
    </div>

    <script>
        // 图上传与预览相关控制
        $('#pic').fileinput({
            showUpload: false, //是否显示上传按钮,跟随文本框的那个

            showRemove: false, //显示移除按钮,跟随文本框的那个

            showCaption: true, //是否显示标题,就是那个文本框

            showPreview: true, //是否显示预览,不写默认为true

            dropZoneEnabled: false, //是否显示拖拽区域，默认不写为true，但是会占用很大区域

            //minImageWidth: 50, //图片的最小宽度

            //minImageHeight: 50,//图片的最小高度

            //maxImageWidth: 1000,//图片的最大宽度

            //maxImageHeight: 1000,//图片的最大高度

            //maxFileSize: 0, //文件最大大小，单位为kb，如果为0表示不限制文件大小

            //minFileCount: 0, //文件最小大学， 单位为kb，如果为0表示不限制文件大小

            maxFileCount: 1, //表示允许同时上传的最大文件个数

            enctype: 'multipart/form-data',

            validateInitialCount: true,

            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

            allowedFileTypes: ['image'], //配置允许文件上传的类型

            allowedPreviewTypes: ['image'], //配置所有的被预览文件类型

            allowedPreviewMimeTypes: ['jpg', 'png', 'gif'], //控制被预览的所有mime类型

            language: 'zh'
        })

        // 控制生成的代码的样式
        $('input.file-caption-name').attr('placeholder', '点击右方的选择图片按钮选择图片');
        $('span.hidden-xs').text("选择图片");
    </script>
</body>

</html>